<template>
    <section>
      <header class="top_tips">
        <span class="num_tips">{{fatherComponent=='home'?'第一天':'第一题'}}</span>
      </header>
      <div class="item" v-if=" fatherComponent == 'home' ">
        <div class="home_logo item_container_bgc"></div>
        <router-link to="item" replace class="start button_style"></router-link>
      </div>
      <div class="item" v-else>
          <div class="item_logo item_container_bgc"></div>
          <div class="item_list_container" v-if="itemDetail.length>0">
            <header class="item_title">{{itemDetail[itemNum-1].topic_name}}</header>
            <ul>
              <li class="item_list" v-for="(item,index) in itemDetail[itemNum-1].topic_answer" :key="index" @click="choosed(index,item.topic_answer_id)">
                <span class="option_style" :class="{has_choosed:index==choosedNum}">{{chooseType(index)}}</span>
                <span class="option_detail">{{item.answer_name}}</span>
              </li>
            </ul>
          </div>
        <div @click="nextItem" class="next_item button_style" v-if="itemNum<itemDetail.length"></div>
        <div @click="submitAnswer" class="submit_item button_style" v-else></div>
      </div>
    </section>
</template>

<script>
import {getItems} from '@/api/item.js'
import {mapState,mapActions} from 'vuex'
export default {
  name:'home',
  data(){
    return{
      time:0,
      itemDetail:[],
      choosedNum:null,
      choosedId:null,
    }
  },
  props:['fatherComponent'],
  mounted(){
    if(this.fatherComponent == 'item'){
      this.initializeData()
    }
  },
  computed:{
    ...mapState({
      timer:(state)=>state.allTime,
      level:state=>state.level,
      itemNum:state=>state.itemNum
    })
  },
  methods:{
    //初始化数据
    async initializeData(){
      const {data:result} = await getItems();
      this.itemDetail = result.data;
    },
    //索引0-3对应选项A-D
    chooseType:type=>{
      switch(type){
        case 0:return 'A'
        case 1:return 'B'
        case 2:return 'C'
        case 3:return 'D'
      }
    },
    //选中的答案信息
    choosed(index,id){
      this.choosedNum = index;
      this.choosedId = id;
    },
    //点击下一题
    nextItem(){
      if(this.choosedNum == null) return this.$Message.warning({title:'警告,请选择您的答案'})
      this.$store.dispatch('add_itemNum');
      this.choosedNum=null;
      this.$store.dispatch('remberItemAnswer',this.choosedId);
    },
    //点击提交
    submitAnswer(){
      if(this.choosedNum == null) return this.$Message.warning({title:'警告,请选择您的答案'})
      this.$store.dispatch('remberItemAnswer',this.choosedId);
      this.$router.replace('score');

    }
  }
}
</script>

<style lang="less">
.top_tips{
  position: absolute;
  top: -60px;
  right: 47px;
  height: 190px;
  width: 100px;
  background-image: url('../images/WechatIMG2.png');
  z-index: 999;
  background-size: cover;
  .num_tips{
    position: absolute;
    font: 600 18px arial, sans-serif;
    color: #a57c50;
    top: 150px;
    left:26px;
  }
}
.item{
  position: relative;
  .item_container_bgc{
    position: absolute;
    width: 90%;
    height: 296px;
    top: 90px;
    left: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
  }
  .home_logo{
    background-image: url('../images/1-2.png');
  }
  .item_logo{
      background-image: url('../images/2-1.png');
  }
  .button_style{
    display: block;
    height: 45px;
    width: 104px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 385px;
    left: 50%;
    transform: translate(-50%,0);
  }
  .start{
    background-image: url('../images/1-4.png');
  }
  .next_item{
    background-image: url('../images/2-2.png');
  }
  .submit_item{
    background-image: url('../images/3-1.png');
  }
  .item_list_container{
    position:absolute;
    top: 111px;
    height: 255px;
    width: 241px;
    left: 50%;
    padding-top: 30px;
    box-sizing: border-box;
    transform: translate(-50%,0);
    z-index: 999;
    .item_title{
      font-size: 18px;
      color: #f9f8f6;
      font-weight: 700;
      font-family: Arial, Helvetica, sans-serif;
      letter-spacing: 2px;
    }
    .item_list{
      font-size: 18px;
      width: 100%;
      font-weight: 700;
      color: #f9f8f6;
      font-family: Arial, Helvetica, sans-serif;
      margin-top: 10px;
      .option_style{
        box-sizing: border-box;
        height: 21px;
        width: 21px;
        display: inline-block;
        font-size: 18px;
        text-align: center;
        line-height: 18px;
        border-radius: 50%;
        border: 2px solid white;
        color: inherit;
      }
      .option_detail{
        display: inline-block;
        box-sizing: border-box;
        height: 21px;
        color: inherit;
        padding-left:10px ;
      }
      .has_choosed{
        background: red;
      }
    }
  }
}

</style>